<template>
  <div
    v-if="showNav"
    class="fixed top-0 left-0 right-0 z-[201] bg-white border-b border-gray-200 shadow-sm"
    :style="navStyle"
  >
    <div class="flex items-center justify-between px-4 h-[60px]">
      <div class="flex items-center space-x-6">
        <router-link
          v-for="item in navItems"
          :key="item.path"
          :to="item.path"
          class="px-3 py-2 text-sm font-medium rounded-md transition-colors"
          :class="[
            $route.path === item.path
              ? 'bg-blue-100 text-blue-700'
              : 'text-gray-600 hover:text-gray-900 hover:bg-gray-100'
          ]"
        >
          {{ item.name }}
        </router-link>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref, onMounted, onUnmounted } from 'vue';
import { useRoute } from 'vue-router';

// 声明全局变量类型
declare global {
  interface Window {
    globalVisible: boolean;
  }
}

const route = useRoute();

// 导航项配置
const navItems = [
  { name: '态势大屏', path: '/situationscreen' },
  { name: '飞行数据', path: '/flightdata' },
  { name: '无人机监控', path: '/dronemonitoring' },
  { name: '机场部署', path: '/airportdeployment' },
  { name: '任务调度', path: '/taskschedulingDetail' },
];

// 是否显示导航
const showNav = ref(false);

// 导航样式
const navStyle = computed(() => {
  // 如果 globalVisible = false，导航占满全宽
  if (window.globalVisible === false) {
    return {
      width: '100%',
      left: '0px',
    };
  }
  
  // 如果 globalVisible = true，需要考虑侧边栏宽度
  return {
    width: 'calc(100% - 180px)', // 假设侧边栏宽度为 180px
    left: '180px',
  };
});

// 检查是否为管控中心路由
const isControlCenterRoute = (path: string) => {
  const controlCenterPaths = [
    '/situationscreen',
    '/flightdata',
    '/dronemonitoring',
    '/airportdeployment',
    '/taskschedulingDetail',
  ];
  return controlCenterPaths.includes(path);
};

// 更新导航显示状态
const updateNavVisibility = () => {
  const currentPath = route.path;
  showNav.value = window.globalVisible === true && isControlCenterRoute(currentPath);
};

// 监听全局变量变化
const handleGlobalVisibleChange = () => {
  updateNavVisibility();
};

// 监听路由变化
const handleRouteChange = () => {
  updateNavVisibility();
};

onMounted(() => {
  updateNavVisibility();
  
  // 监听自定义事件
  window.addEventListener('globalVisibleChange', handleGlobalVisibleChange);
  window.addEventListener('popstate', handleRouteChange);
});

onUnmounted(() => {
  window.removeEventListener('globalVisibleChange', handleGlobalVisibleChange);
  window.removeEventListener('popstate', handleRouteChange);
});
</script> 
